<template>
  <Card :title="title">
    <template v-slot:extra>
      <div class="info-card-header__opt">
        <div class="filter-box" :class="keyword ? 'filter-box-actived' : ''">
          <span class="filter-text">{{ keyword }}</span>
          <span class="filter opt-icon" @click="openPrompt"></span>
        </div>
        <span class="clear-all opt-icon" @click="clearAll"></span>
        <span class="refresh opt-icon" @click="refresh"></span>
      </div>
    </template>
    <template v-slot:body>
      <div class="info-card-body" v-show="Object.keys(filteredMap).length">
        <DoRow class="" v-for="(value, key) in filteredMap" :key="key">
          <DoCol :span="6" class="info-key">{{ key }}</DoCol>
          <DoCol :span="16" class="info-value">: {{ value }}</DoCol>
          <DoCol :span="2" class="info-opt">
            <span class="info-delete" @click="removeItem(key)"></span>
          </DoCol>
        </DoRow>
      </div>
      <div
        class="info-card-empty"
        v-show="Object.keys(filteredMap).length === 0"
      >
        <span>empty</span>
      </div>
    </template>
  </Card>
</template>
<script>
import Card from "@common/Card";

export default {
  components: {
    Card,
  },
  props: {
    title: {
      default: "",
    },
    infoMap: {
      default: {},
    },
  },
  data() {
    return {
      keyword: "",
    };
  },
  computed: {
    filteredMap() {
      if (this.keyword) {
        let map = Object.create({});
        for (const key in this.infoMap) {
          if (Object.hasOwnProperty.call(this.infoMap, key)) {
            if (
              this.infoMap[key].indexOf(this.keyword) > -1 ||
              key.indexOf(this.keyword) > -1
            ) {
              map[key] = this.infoMap[key];
            }
          }
        }
        return map;
      } else {
        return this.infoMap;
      }
    },
  },
  methods: {
    removeItem(key) {
      if (window.confirm(`是否确认清除${key}`)) {
        this.$emit("removeItem", key);
      }
    },
    openPrompt() {
      this.keyword = window.prompt(
        "请输入过滤关键词",
        this.keyword ? this.keyword : ""
      );
    },
    clearAll() {
      if (window.confirm(`将清空所有${this.title}数据，是否确认清空？`)) {
        this.$emit("clear");
      }
    },
    refresh() {
      this.$emit("refresh");
    },
  },
};
</script>
<style lang="less">
.info-card-header__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  .opt-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-size: 15px;
    background-repeat: no-repeat;
    margin: 0 10px;
  }
  .refresh {
    background-image: url();
  }
  .clear-all {
    background-image: url();
  }
  .filter-box {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    .filter-text {
      font-size: 12px;
    }
    .opt-icon {
      margin: 0 10px 0px 5px;
    }
  }
  .filter-box-actived {
    border-radius: 10px;
    padding: 3px 0px 3px 10px;
    border: 1px solid #d9e1e8;
  }
  .filter {
    background-image: url();
  }
}
.info-card-body {
  font-size: 18px;
  .info-key {
    font-weight: bolder;
    overflow-x: scroll;
    margin-right: 5px;
  }
  .info-value {
    overflow-x: scroll;
  }
  .info-opt {
    text-align: center;
    span {
      display: inline-block;
      width: 15px;
      height: 15px;
      background-image: url("");
      background-size: 15px;
      background-repeat: no-repeat;
    }
  }
}
.info-card-empty {
  text-align: center;
}
</style>